<template>
  <div class="container">
    <!-- 上方搜索框 -->
    <div class="above">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="real_name" placeholder="请你输入姓名" clearable />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="stu_num" placeholder="请你输入学号" clearable />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="phone" placeholder="请你输入手机号" clearable />
        </el-form-item>
        <el-form-item label="状态" align="center">
          <el-select v-model="is_active" placeholder="请选择状态" clearable size="large" style="width: 200px; height: 25px;">
            <el-option label="激活" value="true" />
            <el-option label="未激活" value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="学校">
          <el-select v-model="school_name" placeholder="请选择学校" clearable size="large" style="width: 200px; height: 25px;">
            <el-option :key="index" :label="item.school_name" :value="item.id" v-for="(item, index) in schoolList" />
          </el-select>
        </el-form-item>
        <el-form-item label="学院">
          <el-select v-model="academy" placeholder="请选择学院" clearable size="large" style="width: 200px; height: 25px;">
            <el-option :key="index" :label="item.school_name" :value="item.id" v-for="(item, index) in schoolList" />
          </el-select>
        </el-form-item>
        <el-form-item label="年级">
          <el-select v-model="grade" placeholder="请选择年级" clearable size="large" style="width: 200px; height: 25px;">
            <el-option :key="index" :label="item.school_name" :value="item.id" v-for="(item, index) in schoolList" />
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="class_name" placeholder="请选择班级" clearable size="large" style="width: 200px; height: 25px;">
            <el-option :key="index" :label="item.school_name" :value="item.id" v-for="(item, index) in schoolList" />
          </el-select>
        </el-form-item>
        <el-button type="primary" size="large" round @click="reset()">重置</el-button>
      </el-form>

    </div>
    <!-- 下方表格区 -->
    <div class="below">
      <el-form-item label="">
        <el-button type="primary" @click="Studentadd()">添加学生账号</el-button>
        <el-button type="primary" @click="Studentbatchadd()">批量添加学生账号</el-button>
      </el-form-item>
      <el-table :data="filterstudentList" style="width: 100%" class="my-table">
        <el-table-column prop="stu_num" label="学号" width="120" align="center" />
        <el-table-column prop="user.real_name" label="姓名" width="120" align="center" />
        <el-table-column prop="user.phone" label="手机" width="120" align="center" />
        <el-table-column prop="school.school_name" label="学校" width="120" align="center" />
        <el-table-column prop="academy" label="学院" width="120" align="center" />
        <el-table-column prop="grade" label="年级" width="120" align="center" />
        <el-table-column prop="class_name" label="班级" width="120" align="center" />
        <el-table-column prop="user.is_active" label="状态" width="120" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.user.is_active" @change="updateState(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="right" label="操作" width="230" align="center">
          <template #default="scope">
            <el-button type="success" size="small" round @click="editSchoolAdmin(scope.row)">查看</el-button>
            <el-button type="primary" size="small" round @click="editSchoolAdmin(scope.row)">修改</el-button>
            <el-button type="danger" size="small" round @click="resetpassword(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增弹窗 -->
    <div>
      <!-- 新增对话框 -->
      <el-dialog v-model="addStudentDialog" title="新增学生账号" width="40%" draggable>
        <el-form :model="student">
          <el-form-item label="姓名:" :label-width="formLabelWidth">
            <el-input v-model="student.real_name" autocomplete="off" placeholder="输入姓名" />
          </el-form-item>
          <el-form-item label="学号:" :label-width="formLabelWidth">
            <el-input v-model="student.stu_num" autocomplete="off" placeholder="输入学号" />
          </el-form-item>
          <el-form-item label="手机号:" :label-width="formLabelWidth">
            <el-input v-model="student.phone" autocomplete="off" placeholder="输入手机号" />
          </el-form-item>
          <el-form-item label="所属学校:" :label-width="formLabelWidth">
            <el-input v-model="student.school_name" autocomplete="off" placeholder="输入所属学校" />
          </el-form-item>
          <el-form-item label="学院:" :label-width="formLabelWidth">
            <el-input v-model="student.academy" autocomplete="off" placeholder="输入学院" />
          </el-form-item>
          <el-form-item label="年级:" :label-width="formLabelWidth">
            <el-input v-model="student.grade" autocomplete="off" placeholder="输入年级" />
          </el-form-item>
          <el-form-item label="班级:" :label-width="formLabelWidth">
            <el-input v-model="student.class_name" autocomplete="off" placeholder="输入班级" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="newschoolAdmin">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { getStudentList } from "@/api/userApi";
export default {
  created() {
    this.Liststudent();
    this.fetchschoolList();
  },
  data() {
    return {
      id: "",
      stu_num: "",
      real_name: "",
      phone: "",
      school_name: "",
      academy: "",
      grade: "",
      class_name: "",
      major: "",
      gender: "",
      is_active: "",
      // 学生列表
      studentList: [],
      // 筛选后的学生列表
      filterstudentList: [],
      // 添加学生账号弹窗
      addStudentDialog: false,
      // 学生对象
      student: {},
    }
  },
  // 计算属性
  computed: {
    // 获取学校list
    ...mapState(["schoolList"]),
    // 数据筛选
    filterstudentList() {
      if (this.real_name === "" && this.stu_num === "" && this.phone === ""
        && this.is_active === "" && this.school_name === "" && this.academy === "" && this.grade === "" && this.class_name === "") {
        return this.studentList; // 如果没有提供过滤条件，直接返回原始列表
      }
      return this.studentList.filter((student) => {
        // 姓名,学号,手机号,状态,学校,学院,年纪.班级
        const nameMatch = this.real_name === "" || student.user.real_name.includes(this.real_name);
        const numMatch = this.stu_num === "" || student.stu_num.includes(this.stu_num);
        const phoneMatch = this.phone === "" || student.user.phone.includes(this.phone);
        const statusMatch = this.is_active === "" || student.user.is_active === this.is_active;
        const schoolMatch = this.school_name === "" || student.school.id === this.school_name;
        const facultyMatch = this.academy === "" || student.academy === this.academy;
        const gradeMatch = this.grade === "" || student.grade === this.grade;
        const classMatch = this.class_name === "" || student.class_name === this.class_name;

        return nameMatch && numMatch && phoneMatch && statusMatch && schoolMatch && facultyMatch && gradeMatch && classMatch;
      })
    },
  },
  // 方法区
  methods: {
    ...mapActions(["fetchschoolList"]),
    // 搜索框重置
    reset() {
      this.real_name = "";
      this.stu_num = "";
      this.phone = "";
      this.academy = "";
      this.grade = "";
      this.class_name = "";
      this.school_name = "";
      this.is_active = "";
    },
    // 取消按钮
    cancel() {
      this.addStudentDialog = false;
      this.real_name = "";
      this.stu_num = "";
      this.phone = "";
      this.academy = "";
      this.grade = "";
      this.class_name = "";
      this.major = "";
    },
    // 添加学生方法
    Studentadd() {
      this.addStudentDialog = true;
    },
    //学生列表
    Liststudent() {
      getStudentList().then((res) => {
        this.studentList = res;
      })
    },
  }
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;

  display: flex;
  flex-flow: column nowrap;
  /* 对称轴(左右居中) */
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.above {
  margin-bottom: 10px;

  .el-input {
    width: 210px;
    /* 设置宽度 */
  }

  .below {
    height: 100%;
    width: 95%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: flex-start;

    /* 样式表中定义表格的样式 */
    .my-table {
      height: 100%;
      width: 100%;
      border: 1.5px solid #949393;
      /* 设置表格边框颜色 */
    }
  }
}
</style>